<!--注册-->
<template>
  <div id="register">
    <div class="register-ui">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item prop="nickName" label="昵称" required>
          <el-input v-model.trim="ruleForm.nickName" maxlength="10"></el-input>
        </el-form-item>

        <el-form-item prop="email" label="邮箱" required>
          <el-input type="email" v-model.trim="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item prop="phone" label="手机号" required>
          <el-input v-model.number="ruleForm.phone"></el-input>
        </el-form-item>

        <el-form-item  prop="pass" label="密码" required>
          <el-input :type="passType" v-model.trim="ruleForm.pass">
            <!-- input中加图标必须要有slot="suffix"属性，不然无法显示图标 -->
            <i slot="suffix" :class="passType === 'password' ? 'iconfont icon-thirdbiyan' : 'el-icon-view'"
               @click="showPass"></i>
          </el-input>
        </el-form-item>
        <el-form-item  prop="checkPass" label="确认密码" required>
          <el-input type="password" v-model.trim="ruleForm.checkPass"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <p>
        <!--   <el-link href="#/register">立即注册</el-link>-->
        <router-link to="/login" tag="el-link">立即登录</router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data () {
    // 校验昵称格式
    let validateNickName = (rule, value, callback) => {
      // 正则： 2-10位汉字，数字，字母
      let re =  /[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}/;

      if(value === '') {
        callback(new Error('请输入昵称'));
      } else if(re.test(value)){
        callback();
      } else {
        callback(new Error('昵称2-10位汉字，数字或字母组成'));
      }
    };

    // 校验邮箱格式
    let validateEmail = (rule, value, callback) => {
      let re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

      if(value === '') {
        callback(new Error('请输入邮箱'));
      } else if(re.test(value)){
        callback();
      } else {
        callback(new Error('请输入正确的邮箱地址'));
      }
    };

    // 校验手机号格式
    let validatePhone = (rule, value, callback) => {
      //获得输入数字的个数
      let length = value.toString().length;

      if(length === 0) {
        callback(new Error('请输入手机号'));
      } else if(length !== 11){
        callback(new Error('请输入正确的手机号码'));
      } else {
        callback();
      }
    };

    // 校验密码格式
    let validatePass = (rule, value, callback) => {
      //获得输入密码的长度
      let length = value.length;

      if (length === 0) {
        callback(new Error('请输入密码'));
      } else if ( !/^[a-zA-Z0-9]+$/.test(value)) {  //若密码 不是 由字母，数字组成
        callback(new Error('密码由8-16位数字和字母组成，不能使用特殊字符'))
      } else if(length < 8 || length > 16){
        callback(new Error('密码由8-16位数字和字母组成，不能使用特殊字符'));
      } else {
        // 如果用户输入了 第二个密码，则对其进行验证
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };

    // 校验两次密码是否一致
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        nickName: '',
        email: '',
        phone: '',
        pass: '',
        checkPass: '',
      },
      rules: {
        nickName: [
          { validator: validateNickName, trigger: 'blur'}
        ],
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        phone: [
          {validator: validatePhone, trigger: 'blur'}
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },

      // 第一个密码框的 type ： text 或 password
      passType: 'password',

    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          // 定义用户对象
          let user = {
            id: 10001, // 用户id
            nickName: this.ruleForm.nickName,  // 用户昵称
            email: this.ruleForm.email,  // 用户邮箱
            phone: this.ruleForm.phone.toString(),  // 用户手机号码
            pass: this.ruleForm.pass,  // 用户通行证密码
            lv: 0,  // 用户等级
            info: '', // 用户介绍（用户自定义）
            sex: 0,  // 0: 男，1：女， 2：保密
            birthday: null, // 用户生日，存日期对象
            privacyMsg: 0, // 私信提醒设置  0: 所有人， 1: 关注的人
            privacyNotice: ['歌单被收藏', '视屏被收藏', '电台被订阅', '收到赞', '新粉丝'], // 通知提醒设置
            privacyMusicRank: 0, // 听歌排行设置  0: 所有人可见， 1: 仅自己可见
            isLogin: true, // 登录状态

            // 用户的 动态、关注、粉丝 数据
            userData: [
              {
                label: '动态',
                counts: 0
              },
              {
                label: '关注',
                counts: 0
              },
              {
                label: '粉丝',
                counts: 0
              },
            ],

            // 用户歌单
            songBox: [
              {
                iconClass: 'el-icon-headset', // icon图标
                title: '我喜欢的音乐', // 歌单名称
                number: 0, // 歌单中的歌数
                time: '2021-3-4'  // 歌单创建的时间
              }
            ],
          };

          // 获取所有 cookie name，以数组形式返回
          let userArray = this.$cookies.keys();

          if (userArray === 0) {
            this.$cookies.set('defaultUserId', 10001);
          } else {
            user.id += userArray.length;
          }

          this.$cookies.config('30d');
          this.$cookies.set(`${user.id}`, user);

          // 检测cookies 中是否已存入数据
          if(this.$cookies.isKey(`${user.id}`)) {
            this.$message({
              showClose: true,
              message: '注册成功',
              type: 'success',
              center: true
            });

            // 跳转到登录界面
            this.$router.push('/login');
          } else {
            this.$message({
              showClose: true,
              message: '注册失败',
              type: 'error',
              center: true
            });
          }
        } else {
          return false;
        }
      });
    },

    showPass () {
      if(this.passType === 'password') {
        // 将第一个密码框的 type 改为 text
        this.passType = 'text';
      } else {
        // 将第一个密码框的 type 改为 password
        this.passType = 'password';
      }

    },

    resetForm (formName) {
      this.$refs[formName].resetFields();
    },

  }
}
</script>

<style lang="less" scoped>
@import "../public/less/register";
</style>